<!--  -->
<template>
  <div>
    <demo></demo>
    <div class="mycenter">
      <h3>&nbsp;&nbsp;&nbsp;&nbsp;全部功能</h3>
      <div class="myenter_left_nav">
        <el-col :span="3">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="1">
              <i class="el-icon-goods"></i>
              <span slot="title">我的购物车</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-s-order"></i>
              <span slot="title">我的订单</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </div>
      <div class="mycenter_right_content">
        <div class="mycenter_right_content_info">
          <div @click="pri_cli" class="block">
            <el-avatar :size="100" :src="circleUrl"></el-avatar>
          </div>
        </div>
        <br />
        <h2>欢迎<span v-text="username"></span>来到个人中心</h2>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import demo from "@/components/nav.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    demo,
  },
  data() {
    //这里存放数据
    return {
      circleUrl:
        "https://edu-guli2632.oss-cn-shenzhen.aliyuncs.com/2020/09/08/3a6f01de9c754cb89da74e6491a667adfile.png",
      token: "",
      username: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    pri_cli() {
      console.log("zzz");
    },
    init_getusername() {
      // this.username = "";
      // let token = this.$store.state.token;

      // if (token == null || token.trim() == "") {
      //   this.$router.push({
      //     path: "/login",
      //   });
      //   return;
      // }
      let this_ = this;
      this.$http
        .post(`http://localhost:88/api/book/user/verify/jwt/cookie`)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            this_.username = response.data.username;
          } else {
            this_.$router.push({
              path: "/login",
            });
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init_getusername();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.mycenter {
  margin: 0 auto;
  width: 80%;
  min-width: 1200px;
}
.mycenter_left_nav {
  float: left;
}
.mycenter_right_content {
  float: left;
  background: rgb(50, 154, 224);
  margin: 0 auto;
  margin-left: 80px;
  width: 1000px;
  height: 600px;
}
.mycenter_right_content_info {
  width: 200px;
  margin: 0 auto;
}
h2 {
  text-align: center;
}
</style>